<template>
    <div class="quik-links-content">
        <div class="item" v-for="(item, index) in quik_links" :key="item.name">
            <img :src="item.pic" alt="">
        </div>
    </div>
</template>

<script setup lang='ts'>
import { reactive, ref, onMounted } from 'vue'
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";



interface quik_link {
    pic: string;
    name: string;
}

let quik_links: quik_link[] = reactive([{
    pic: '/images/banner/test.jpg',
    name: 'test'
}])

let slides_per_view = ref(4)




quik_links.push({
    pic: '/images/banner/test.jpg',
    name: 'test'
})
quik_links.push({
    pic: '/images/banner/test.jpg',
    name: 'test'
})
quik_links.push({
    pic: '/images/banner/test.jpg',
    name: 'test'
})


const resize = () => {
    window.addEventListener('resize', function () {
    });
}
onMounted(() => {
    resize()

})

</script>

<style scoped lang='scss'>
.quik-links-content {
    width: 100%;
    height: 320px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 10%;


    .item {
        width: 330px;
        box-sizing: border-box;
        margin-right: 10px;
    }

    .item:last-child {
        margin-right: 0;
    }

    img {
        width: 100%;
        height: 230px;
    }
}
</style>